<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及内块元素的垂直居中
					【文本和图片垂直居中（对齐）效果】
					对齐分为四种：基线对齐、顶部对齐
					             居中对齐、底部对齐
				    元素种类：块元素、行元素、行内块元素
					块元素特点：独占一行、设置宽高
					行元素特点：一行内显示、不可设置宽高
					网页：元素之间嵌套生成
					行元素与块元素可以任意嵌套
					前提：设置宽高---行套块
					            ---块套块    √
								---块套行    √
					前提：一行内显示---行套块  √
					              ---块套块  X
					              ---块套行  X
								  ---行套行  √
		 -->
		 <style>
		 	p img:nth-child(1){
		 		/* vertical-align: baseline;  默认基线对齐 */
		 		vertical-align: baseline;
		 	}
			/* 问题：派生选择器，特点：找后代 */
		 	p img:nth-child(2){
		 		/* vertical-align: baseline;  顶部对齐 */
		 		vertical-align: top;
				width: 500px;
				height: 500px;
				background: red;
		 	}
			img.baseline{
				vertical-align: baseline;
			}
			img.top{
				vertical-align: top;
			}
			img.middle{
				vertical-align: middle;
			}
			img.bottom{
				vertical-align: bottom;
			}
			
		</style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字： 图片叫什么名字
				                    文字后加img，设定宽高：25~100px
									每个图片后面加：基线对齐、顶部对齐
									居中对齐、底部对齐
		-->
		<h1>文本与图片垂直属性</h1>
		<p>太乙真人<img class="baseline" src="img/1.png" alt="太乙真人" width="100px" height="100px">基线对齐</p><p>
	    <p>丙吒<img class="top" src="img/2.png" alt="丙吒" width="100px" height="100px" />顶部对齐</p>
	    <p>笑吒<img class="middle" src="img/3.png" alt="笑吒" width="100px" height="100px" />居中对齐</p>
	    <p>凶吒<img class="bottom" src="img/4.jpeg" alt="凶吒" width="100px" height="100px" />底部对齐</p>
	    <!-- css选择器--抓第一张图片 
		派生选择器+伪类选择器
		p img:nth-child(1)
		-->
	</body>
</html>